<template>
  <div>
    <span v-for="(item, index) in infoArray" :key="index">
      {{ item.label }}:
      <el-select
        v-model="queryParam[item.value]"
        class="m-2"
        placeholder="请选择"
      >
        <el-option
          v-for="item in infolist[item.value]"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        />
      </el-select>
    </span>
    <span class="info" v-for="item in infoInput" :key="item.value">
      <el-input
        :placeholder="item.placeholder"
        v-model="queryParam[item.value]"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </span>
    <el-button type="primary" @click="queryList()">查询</el-button>
    <el-button type="primary" @click="showDialog()">新增</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <template v-for="(item, index) in columnList">
        <el-table-column
          :key="index"
          :prop="item.field"
          :label="item.title"
          :width="item.width"
        >
          <template slot-scope="scope">
            <span> {{ scope.row[item.field] | qxSelffilter(item.value) }}</span>
          </template>
        </el-table-column>
      </template>

      <el-table-column label="操作">
        <template slot-scope="{ row, $index }">
          <el-button @click="updateShowDialog(row)" type="primary">
            修改
          </el-button>
          <el-button type="danger" @click="deleteUser(row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 20px; text-align: center" :current-page="queryParam.currentPage"
      :page-size="queryParam.pageSize" :page-sizes="[3, 5, 10, 20]" :total="total" :pager-count="5"
      @size-change="handleSizeChange" @current-change="goPage" layout=" prev, pager, next , total,sizes" />
    <edit-model
      :showEdit="dialogFormVisible"
      :infolist="infolist"
      :ruleForm="itemEdit"
      @close="CloseShow"
    ></edit-model>
  </div>
</template>
<script>
import EditModel from "./model/EditModel.vue";
export default {
  name: "dic_info",
  components: { EditModel },
  mounted() {
    // this.queryList()
  },
  created() {
    // 给枚举赋值   { label: "字典状态", value: "status", enumType: "status" },
    // let enumUtility = new EnumUtility();
    // this.infoArray.forEach((element) => {
    //   if (element.enumType) {
    //枚举数据结构 [{"enumType":"status","value":"0","text":"启用"},{"enumType":"status","value":"1","text":"禁用"}]
    //    this.infolist[element.value] = enumUtility.Get(element.enumType);
    //  }
    // });
  },
  data() {
    return {
      // 下拉选择属性
      infoArray: [
        /*
         * label:下拉选项的标题,如:用户状态
         * value: 选择值列表 与 传到 服务端的字段: 如:status=30
         * enumType:从字典=>枚举 中的下拉选项映射值 , 枚举值赋值是在创建vue对象后,即方法中实现的
         */
        { label: "字典状态", value: "status", enumType: "status" },
      ],
      infoInput: [
        /*infoInput：输入框数据 */
        { placeholder: "输入:字典类型", value: "enumType" },
        { placeholder: "输入:显示名称", value: "text" },
      ],
      // 下拉选项值
      /* 枚举中完成赋值的status,type*/
      infolist: {
        status: [
          { enumType: "status", value: "0", text: "启用" },
          { enumType: "status", value: "1", text: "禁用" },
        ],
      },
      // 列表查询参数
      queryParam: {
        currentPage: 1,
        pageSize: 10,
      },
      // 列表数据
      tableData: [],
      total: 0,
      // 列字段
      columnList: [
        { title: "编号", field: "id" },
        { title: "字典类型", field: "enumType" },
        { title: "字典值", field: "value" },
        { title: "显示名称", field: "text" },
        { title: "排序编号", field: "shortNo" },
        { title: "状态", field: "status", value: { enum: "status" } },
        {
          title: "更新时间",
          field: "updateTime",
          value: { date: "MM-dd hh:mm:ss" },
        },
        {
          title: "创建时间",
          field: "createTime",
          value: { date: "MM-dd hh:mm:ss" },
        },
      ],
      dialogFormVisible: false, // 是否显示弹框
      itemEdit: {
        dialogName: "修改字典", // 弹框标题 如:新增用户 或 修改 用户
      }, // 编辑或修改的字段,如name, idd等
      rules: {
        // 品牌名称的验证规则
        // require:必须要校验字段（前面五角星有关系）  message 提示信息    trigger:用户行为设置（事件的设置:blur、change）
        // tmName 对应表单上的prop的名称必须一致  <el-form-item label="品牌名称" :label-width="formLabelWidth" prop="tmName">
        userName: [
          { required: true, message: "必须输入登录账号", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码" }],
        status: [{ required: true, message: "请选择状态" }],
        type: [{ required: true, message: "请选择类型" }],
      },
    };
  },
  watch: {},
  methods: {
    async queryList() {
      const result = await this.$api.dic.getDicList(this.queryParam);
      if (result.code == "100") {
        this.tableData = result.data.list;
        this.total = result.data.total;
      }
    },
    goPage(currentPage) {
      this.queryParam.currentPage = currentPage;
      this.queryList();
    },
    handleSizeChange(pageSize) {
      this.queryParam.pageSize = pageSize;
      this.queryParam.currentPage = 1;
      this.queryList();
    },
    showDialog() {
      // console.log('显示弹框')
      this.dialogFormVisible = true;
      this.itemEdit = {
        enumType: "",
        value: "",
        text: "",
        status: "",
        shortNo: "",
        dialogName: "添加字典",
      };
    },
    updateShowDialog(row) {
      this.itemEdit = { ...row };
      this.itemEdit['dialogName']="修改字典"
      //显示对话框
      this.dialogFormVisible = true;
    },
    submitForm() {
      //当全部验证字段通过，再去书写业务逻辑
      this.$refs.ruleForm.validate(async (success) => {
        if (success) {
          let result = await this.$api.user.updateOrSave(this.form);
          if (result.code == "100") {
            // 关闭窗口
            this.dialogFormVisible = false;
            // 查询数据
            this.queryList();
          }
        } else {
          console.log("检查提交参数");
          return false;
        }
      });
    },
    deleteUser(row) {
      //弹框
      this.$confirm(`你确定删除字典:${row.enumType}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //当用户点击确定按钮的时候会出发
          //向服务器发请求
          let result = await this.$api.dic.deleteDic(row.id);
          //如果删除成功
          if (result.code == "100") {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //再次获取品牌列表数据
            this.queryList();
          }
        })
        .catch(() => {
          //当用户点击取消按钮的时候会触发
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    CloseShow(data) {
      // console.log(data);
      // 关闭对话
      this.dialogFormVisible = false;
      if (data.isRefresh == "update") {
        this.queryList(); // 更新的情况
      }
      if (data.isRefresh == "insert") {
        this.queryList(); // 新增的情况
      }
    },
  },
};
</script>
  
<style lang="scss">
</style>
  